<template>
  <div class="progress" v-if="percentage < 100">
    <img src="/cat2.gif" />
    <h3>加载中，马上就好</h3>
    <el-progress :stroke-width="24" :percentage="percentage" />
  </div>
  <div class="page" v-else>
    <header @click="BackToBeforePage">
      <h2>
        <i> <img src="/resume.svg" />简历封面 </i>
        <i>Before Pages</i>
      </h2>
      <i>
        <i>Tech Otakus Change The World</i>
        <br />
        <i>本简历项目由Vue3构建</i>
      </i>
    </header>
    <div class="introduction" title="个人简介">
      <h1>姓名:{{ resumeInfo.userInfo.name }}</h1>
      <p>性别:{{ resumeInfo.userInfo.gender }}&nbsp; &nbsp;年龄:{{ resumeInfo.userInfo.age }} &nbsp; &nbsp;</p>
      <p>{{ resumeInfo.userInfo.post }}，<span class="age">{{ resumeInfo.userInfo.exp }}</span>开发经验</p>
      <p>
        <img src="@/assets/logos/school.svg" style="width: 18px" />
        <span class="phone">学历:{{ resumeInfo.userInfo.record }}，毕业时间:{{ resumeInfo.userInfo.graduation }}</span>
      </p>
      <p>
        <img src="@/assets/logos/phone.svg" style="width: 18px" />
        <span class="phone">手机号(微信):{{ resumeInfo.userInfo.phone }}</span>
      </p>
      <p>
        <img src="@/assets/logos/mail.svg" style="width: 18px" />
        <a class="link">邮箱:{{ resumeInfo.userInfo.mail }}</a>
      </p>
      <div title="码云地址" class="gitee">
        <img style="width: 18px" src="@/assets/logos/gitee.svg" />
        <a
            :href="resumeInfo.network.gitee"
            class="link"
            target="_blank"
          >
            <span>码云地址：</span>
            {{ resumeInfo.network.gitee }}
          </a>
      </div>
      <div class="tags">
        <span class="tag" v-for="item in resumeInfo.skill" :key="item">{{ item }}</span>&nbsp;
      </div>
    </div>
    <div class="btnBox" v-if="timeOut" @click="goToHome">
      <div class="btn">让我们开始吧！</div>
      <h2 class="ToHome">前往主页</h2>
    </div>
    <footer>
      <div class="copyright">
        <div>
          <span class="text">@Made</span>by
          <span class="mark" style="">&nbsp;{{ resumeInfo.userInfo.ename }}&nbsp;</span>
        </div>
        <div class="techPower">
          <span class="text">@Powered</span> with &nbsp;
        </div>
        <div>
          <img src="@/assets/logos/vue.svg" id="tinyIcon" />
          <img src="@/assets/logos/vite.svg" id="tinyIcon" />
          <img src="@/assets/logos/pinia.svg" id="tinyIcon" />
          <img src="@/assets/logos/gitee.svg" id="tinyIcon" />
        </div>
        <div>
          <img src="@/assets/logos/ts.png" id="longIcon" />
          <img src="@/assets/logos/elementPlus.svg" id="longIcon" />
          <img src="@/assets/logos/eChatrs.png" id="longIcon" />
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, markRaw } from "vue";
import useStore from "@/store";
import { ElNotification, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { DataAnalysis } from "@element-plus/icons-vue";
import resumeData from '@/assets/info.ts'
const router = useRouter();
const { methods } = useStore();

onMounted(() => {
  device();
});
const resumeInfo = resumeData;

const device = () => {
  // 获取设备类型
  let deviceType = ref(methods.getDeviceType());
  let device = deviceType.value;
  router.push(deviceType.value ? "/mobile" : "/");
  // 根据设备类型弹出消息提示框
  if (deviceType.value) {
    ElNotification({
      title: "页面已更新",
      dangerouslyUseHTMLString: true,
      message: `检测到移动端设备类型为${device[0]}，已为移动端优化；当前页面：封面页`,
      type: "success",
      duration: 2500,
    });
  }
};

// 加载进度条
const percentage = ref(0);
setInterval(() => {
  percentage.value++;
}, 25);

// 打开消息弹窗
const open = () => {
  // ElMessageBox.confirm(
  //   `简历项目现已为移动端优化`,
  //   "公告栏",
  //   {
  //     showCancelButton: false,
  //     dangerouslyUseHTMLString: true,
  //     icon: markRaw(DataAnalysis),
  //   }
  // );
};

// 弹出公告栏
setTimeout(() => {
  open();
  // 2.5s后关闭公告栏
  setTimeout(() => {
    ElMessageBox.close();
  }, 2500);
}, 5000);

let timeOut = ref(false);
setTimeout(() => {
  timeOut.value = true;
}, 6000);

const goToHome = () => {
  router.push("/homeMobile");
};
</script>

<style src="@/assets/css/home.css"></style>
<style lang="less" scoped>
@vw: 3.75vw;

.progress {
  width: (300 / @vw);
  text-align: center;
  margin: auto;
  margin-top: (100 / @vw);

  img {
    width: (150 / @vw);
    height: (150 / @vw);
  }

  h3 {
    color: #000;
  }
}

@keyframes animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.page {
  position: relative;
  width: (300 / @vw);
  background-color: #f7f7f7;
  margin: auto;
  box-shadow: 0 0 (6 / @vw) #00000083;
  padding: (30 / @vw);
  margin-top: (20 / @vw);
  margin-bottom: (50 / @vw);
  animation: animation 1.5s linear alternate;

  header {
    cursor: pointer;
    margin-bottom: (30 / @vw);

    h2 {
      display: flex;
      justify-content: space-between;
      transition: all 0.3s;
      border-bottom: (3 / @vw) solid #a0a0a0;
      margin: 0;

      img {
        position: relative;
        top: (4 / @vw);
        width: (25 / @vw);
        height: (25 / @vw);
      }
    }

    .BackToBeforePage {
      position: relative;
      right: (100 / @vw);
      color: #ff0000;
      opacity: 0;
      transition: all 0.3s;
    }

    &:hover {
      color: #000;

      h2 {
        border-bottom: (3 / @vw) solid #000000;
      }

      .BackToBeforePage {
        right: (-20 / @vw);
        opacity: 1;
      }
    }
  }

  .introduction {
    transition: all 0.3s;
    color: #000;
    margin-top: (20 / @vw);

    h3 {
      display: flex;
      justify-content: space-between;
      border-bottom: (1 / @vw) solid #a0a0a0;
      cursor: pointer;
      transition: all 0.3s;
    }

    .age {
      padding-left: (4 / @vw);
      padding-right: (4 / @vw);
      background-color: #000;
      color: #fff;
      border-radius: (7 / @vw);
      margin-right: (5 / @vw);
    }

    .Cellphone {
      margin-bottom: (12 / @vw);
    }

    .phone {
      position: relative;
      bottom: (2 / @vw);
      margin-left: (5 / @vw);
      margin-right: (30 / @vw);
    }

    .link {
      position: relative;
      bottom: (2 / @vw);
      color: #26c3be;
      margin-left: (5 / @vw);
      transition: all 0.3s;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        color: #9900ff;
      }
    }

    .gitee {
      margin-top: (12 / @vw);

      img {
        width: (18 / @vw);
      }

      a {
        bottom: (3 / @vw);

        span {
          color: #000;
        }
      }
    }

    .tags {
      margin-top: (10 / @vw);
      color: #fff;

      .tag {
        display: inline-block;
        height: (25 / @vw);
        line-height: (25 / @vw);
        font-size: (15 / @vw);
        text-align: center;
        border-radius: (20 / @vw);
        border: (2 / @vw) solid #797979;
        padding-left: (5 / @vw);
        padding-right: (5 / @vw);
        background-color: #000;
      }
    }
  }

  .btnBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: (50 / @vw);
    animation: animation 1.2s linear alternate;

    .btn {
      width: (135 / @vw);
      text-align: center;
      color: #fff;
      font-weight: 800;
      border-radius: (15 / @vw);
      background: linear-gradient(120deg, #43e97b, #4facfe);
      transition: all 0.3s;
      padding: (20 / @vw);
      cursor: pointer;

      &:hover {
        transform: scale(1.2);
        border: (2 / @vw) solid #1eff00;
      }
    }

    .ToHome {
      color: #000;
    }
  }

  footer {
    margin-top: (30 / @vw);

    .copyright {
      padding: (5 / @vw);
      color: #000;

      img {
        margin-top: (10 / @vw);
        margin-right: (15 / @vw);
      }

      #tinyIcon {
        width: (15 / @vw);
      }

      #longIcon {
        width: (50 / @vw);
      }

      .text {
        font-size: (10 / @vw);
        font-style: italic;
        margin-right: (2.5 / @vw);
      }

      .mark {
        color: #fff;
        font-size: (10 / @vw);
        font-style: italic;
        background: linear-gradient(90deg, #43e97b, #4facfe);
        border-radius: (2.5 / @vw);
      }

      .techPower {
        margin-top: (7 / @vw);
      }
    }
  }
}
</style>
